<template>
  <div>
    <div class="sws">
      <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
				    <h1>学生服务</h1>
			</div>
          <!-- <el-row :gutter="20" v-for="(user,serviceId) in userList" :key="serviceId">
            <el-col :span="5">
              <el-form-item label="日期" :prop="'userList.user.date'">
                <el-date-picker value-format="d" format="yyyy-MM-dd" v-model="user.date" type="date" placeholder="选择年月日"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="服务岗位名称" :prop="'userList.user.workname'">
                <el-input v-model="user.workname" placeholder="输入服务岗位名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="职务" :prop="'userList.user.job'">
                <el-input v-model="user.job" placeholder="输入职务"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="考核级别" :prop="'userList.user.level'">
                <el-input v-model="user.level" placeholder="输入考核级别"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 我的丑陋期待代码改进，但失败-->
        <el-form ref="form" :model="user" :rules="rules" label-width="auto">
          <div class="left"><el-form-item v-for="(user,serviceId) in userList" :key="serviceId" prop="service">
            起始时间
            <el-date-picker class="test3" value-format="d" format="yyyy-MM-dd" v-model="user.date" type="date" placeholder="选择年月日"></el-date-picker>
            服务岗位名称
            <el-input class="test3" v-model="user.workname" placeholder="输入服务岗位名称"></el-input>
            职务
            <el-input class="test3" v-model="user.job" placeholder="输入职务"></el-input>
            考核级别
            <el-input class="test3" v-model="user.level"  placeholder="输入考核级别 "></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="addModule()"
                >添加条目
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-delete"
                type="danger"
                @click="deleteModule()"
                >删除条目
              </el-button>
          </el-form-item>
        </div>
        <div >
          <el-form-item>
            <el-button type="primary" size="medium" @click="submitForm">提交</el-button>
          </el-form-item>
        </div>
        </el-form>
    </div>
</div>
  </template>
  
  <script>
  import { getInfo } from "@/api/login";
  import { updateSWSinfo } from "@/api/login";

  export default {
    name: "update",
    data() {
      return {
        userList:[],
            user: {
                username:"",
                serviceId: "",
                date:"",
                workname:"",
                job:"",
                level:""
        },
      }
    },
    mounted() {
    getInfo().then((res) => {
      this.user.username = res.data.username;//是data标签下的内容，在api取名时注意
    });
  },
    methods: {
        addModule() {
        this.user = {};
        this.userList.push(this.user);
        },
        deleteModule(user) {
        var index = this.userList.indexOf(user); //找到对应图标的下标 
        this.userList.splice(this.userList.length - 1, 1);
        }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            //发起网络请求登录，如果登录成功，跳转到主页面
            //操作与login api联系
            updateSWSinfo(this.user.username,this.user.serviceId,this.user.date,this.user.workname,this.user.job,this.user.level).then(res =>{
              console.log(res.data.accessToken)
              setToken(res.data.accessToken)
            }).catch(() => {
              // 上传，
              this.loading = true
            })
          }
        })
    },
  };
  </script>
  
  <style>
  .update {
    padding: 20px;
  }

  .head{
    margin-left: 10px;
  }

  .test1 {
    width: 50px !important;
  }

  .test2{
    width: 110px !important;
  }

  .test3{
    width: 150px !important;
  }

  .left{
    text-align: left;
    margin-left: 100px;
    margin-right: 50px;
  }

  .right{
  text-align: right;
  margin-right: 100px;
  }

  </style>